import React, { useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { useNavigate} from "react-router-dom";
import {Link,Outlet} from "react-router-dom";
import "./home.less"
const Home = () => {
  const tabs = [
    {
      key: 'homeindex',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: 'todo',
      title: '我的待办',
      icon: <UnorderedListOutline />,
      badge: '5',
    },
    {
      key: 'message',
      title: '我的消息',
      icon: (active: boolean) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: 'personalCenter',
      title: '个人中心',
      icon: <UserOutline />,
    },
  ]
  let navigate = useNavigate();
  const [activeKey, setActiveKey] = useState('todo')
  const setRouteActive = (value: string) => {
    navigate(`${value}`);
    console.log(value,'value')
  }
  return (
    <div className="home">
      <div className="outlet">
              <Outlet />
        </div>
        <div className="bar">
        <TabBar
        onChange={value => setRouteActive(value)}
        >
          {tabs.map(item => (
            <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
            badge={item.badge}
            />
          ))}
        </TabBar>
        </div>
      {/* {
        activeKey == '2'?(
          <>
          <div>1</div>
          <div>2</div>
          </>
        ):(
          <>
          <div>3</div>
          <div>4</div>
          </>
        )
      } */}
    </div>
  )
}
export default Home
